import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const indexList = ref([
    {
      img: "../../../public/img/png/今日已售(元).png",
      price: 120,
      text: "今日已售(元)",
      desc: "增高20%",
      color: "aquamarine"
    },
    {
      img: "../../../public/img/png/今日订票数.png",
      price: 208,
      text: "今日订票数",
      desc: "增高20%",
      color: "#679cf6"
    },
    {
      img: "../../../public/img/png/今日支付订单数.png",
      price: 328,
      text: "今日支付订单数",
      desc: "增高20%",
      color: "#ff8d41"
    },
    {
      img: "../../../public/img/png/今日退票数.png",
      price: 50,
      text: "今日退票数",
      desc: "增高20%",
      color: "#de799b"
    }
  ]);

  return { indexList }
})


export const useEchartsStore = defineStore('echarts', () => {
  const lineOption = ref({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      nameTextStyle: { fontSize: 30 }
    },
    yAxis: {
      type: 'value'
    },
    legend: {
      data: ['售票量', '销售额']
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        name: '售票量'
      },
      {
        data: [700, 840, 798, 694, 1020, 980, 890],
        type: 'bar',
        smooth: true,
        name: '销售额',
        barWidth: 30 // 设置柱状图宽度
      }
    ]
  })

  const barOption = ref({
    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [95, 68212, '三亚'],
        [57.1, 78254, '深圳'],
        [74.4, 41032, '北京'],
        [50.1, 12755, '上海'],
        [89.7, 20145, '武汉'],
        [68.1, 79146, '香港'],
        [19.6, 91852, '澳门'],
        [10.6, 101852, '成都'],
        [32.7, 20112, '哈尔滨']
      ]
    },
    grid: { containLabel: true },
    xAxis: { name: 'amount' },
    yAxis: { type: 'category' },

    series: [
      {
        type: 'bar',
        encode: {
          // Map the "amount" column to X axis.
          x: 'amount',
          // Map the "product" column to Y axis
          y: 'product'
        }
      }
    ]
  })

  const barOption1 = ref({
    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [95, 101852, '三亚'],
        [57.1, 91852, '深圳'],
        [74.4, 41032, '北京'],
        [50.1, 12755, '上海'],
        [89.7, 20145, '武汉'],
        [68.1, 79146, '香港'],
        [19.6, 91852, '澳门'],
        [10.6, 41032, '成都'],
        [32.7, 20112, '哈尔滨']
      ]
    },
    grid: { containLabel: true },
    xAxis: { name: 'amount' },
    yAxis: { type: 'category' },

    series: [
      {
        type: 'bar',
        encode: {
          // Map the "amount" column to X axis.
          x: 'amount',
          // Map the "product" column to Y axis
          y: 'product'
        }
      }
    ]
  })

  const orderOption = ref({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center',
      icon: 'circle',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1100, name: '已付款' },
          { value: 1040, name: '待付款' },
          { value: 100, name: '已取消' }
        ]
      }
    ]
  })

  const payOption = ref({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center',
      icon: 'circle',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1090, name: '支付宝', itemStyle: { color: 'skyblue' } },
          { value: 950, name: '微信', itemStyle: { color: 'yellowgreen' } },
          { value: 50, name: '其他', itemStyle: { color: '#ccc' } }
        ]
      }
    ]
  })

  const cityOption = ref({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      // top: '1%',
      left: 'center',
      icon: 'circle'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '三亚' },
          { value: 735, name: '深圳' },
          { value: 580, name: '北京' },
          { value: 484, name: '上海' },
          { value: 300, name: '武汉' },
          { value: 735, name: '香港' },
          { value: 580, name: '澳门' },
          { value: 484, name: '成都' },
          { value: 300, name: '桂林' }
        ]
      }
    ]
  })

  return { lineOption, barOption, barOption1, orderOption, payOption, cityOption }
})

export const useTrainStore = defineStore('train', () => {
  let trainList = ref([])

  const setTrainList = (data: any) => {
    trainList.value = data
  }

  const delTrainList = (id: number) => {
    const index = trainList.value.findIndex((item: any) => item.key === id)
    trainList.value.splice(index, 1)
  }

  return { trainList, setTrainList, delTrainList }
})


export const useStationStore = defineStore('station', {
  state: () => {
    return {
      stationList: []
    }
  },
  getters: {

  },
  actions: {
    setStationList(data) {
      this.stationList = data
    },
    delStationList(key: number) {
      let index = this.stationList.findIndex((item: any) => item.key === key)
      this.stationList.splice(index, 1)
    }
  }
})